import React, { memo, Fragment, useRef } from "react";
import global from "../../global/config";
import PropTypes from "prop-types";
// antd
import {
  Form,
  Input,
  Button,
  Select,
  InputNumber,
  Radio,
  Row,
  Col,
} from "antd";
const { Option } = Select;
export interface Options {
  label: string;
  value: boolean;
}
export interface FormItem {
  type: string;
  label?: string;
  name?: string;
  required?: boolean;
  style?: object;
  options?: Options[] | string;
  rules?: any[];
  slotName?: string;
  className?: string;
  [propName: string]: any;
}
interface MesPreix {
  [key: string]: string;
  Input: string;
  Radio: string;
  Select: string;
  Date: string;
  Upload: string;
  TextArea: string;
}
interface Props {
  formLayout?: any;
  initialValues?: any;
  isAddBtn?: any;
  formItem: FormItem[];
  children?: JSX.Element;
  [propName: string]: any;
}
const HYFromSearch = function (props: Props) {
  const { formLayout, initialValues, isAddBtn, children, formItem } = props;
  const mesPreix: MesPreix = {
    Input: "请输入",
    Radio: "请选择",
    Select: "请选择",
    Date: "请选择",
    Upload: "请上传",
    TextArea: "请输入",
  };
  const isEdit = false;
  // hooks
  const searchFormRef = useRef(null);

  //函数
  const initFormItem = () => {
    // 检验是否存在
    if (!formItem || (formItem && formItem.length === 0)) {
      return;
    }
    // 定义变量
    const formList: JSX.Element[] = [];
    // 循环处理
    formItem.forEach((item: FormItem) => {
      item.type === "Input" && formList.push(inputElem(item));
      item.type === "Select" && formList.push(selectElem(item));
      item.type === "InputNumber" && formList.push(inputNumberElem(item));
      item.type === "Radio" && formList.push(radioElem(item));
      item.type === "TextArea" && formList.push(textAreaElem(item));
      //   item.type === "SelectComponent" && formList.push(SelectComponent(item));
      //   item.type === "Slot" && formList.push(slotElem(item));
      //   item.type === "Column" && formList.push(columnElem(item));
      //   item.type === "Date" && formList.push(dateElem(item));
      //   item.type === "Upload" && formList.push(uploadElem(item));
    });
    return formList;
  };

  // 规则
  const rule = (data: FormItem) => {
    let rulesAry = [];
    const { required, message, rules, label, type } = data;
    if (required) {
      const msg = mesPreix[type] || "请选择";
      let messages = message || `${msg}${label}`;
      rulesAry.push({ required: true, message: messages });
    }
    if (rules && rules.length > 0) {
      rulesAry = [...rulesAry, ...rules];
    }
    return rulesAry;
  };
  // 渲染
  const inputElem = (data: FormItem) => {
    const { label, name, style, placeholder } = data;
    const rules = rule(data);
    return (
      <Form.Item label={label} name={name} key={name} rules={rules}>
        <Input style={style} placeholder={placeholder} />
      </Form.Item>
    );
  };
  const textAreaElem = (data: FormItem) => {
    const { label, name, style, placeholder } = data;
    const rules = rule(data);
    return (
      <Form.Item label={label} name={name} key={name} rules={rules}>
        <Input.TextArea style={style} placeholder={placeholder} />
      </Form.Item>
    );
  };
  const selectElem = (data: FormItem) => {
    const { label, name, options, style, placeholder } = data;
    const rules = rule(data);
    return (
      <Form.Item label={label} name={name} key={name} rules={rules}>
        <Select style={style} placeholder={placeholder}>
          {options === "status" &&
            global[options].map((elem, index) => {
              const { label, value } = elem;
              //下面value只能传入字符串 所以value为布尔就穿不进，拿到值还要处理我艹了-处理成布尔-这里根据实际项目需要改造
              return (
                <Option key={index} value={value.toString()}>
                  {label}
                </Option>
              );
            })}
        </Select>
      </Form.Item>
    );
  };
  const inputNumberElem = (data: FormItem) => {
    const { label, name, style, min, max } = data;
    const rules = rule(data);
    return (
      <Form.Item label={label} name={name} key={name} rules={rules}>
        <InputNumber min={min} max={max} style={style} />
      </Form.Item>
    );
  };
  const radioElem = (data: FormItem) => {
    const { label, name, options, style } = data;
    const rules = rule(data);
    const option = options as Options[];
    return (
      <Form.Item label={label} name={name} key={name} rules={rules}>
        <Radio.Group style={style}>
          {option.length > 0 &&
            option.map((elem, index) => {
              const { value, label } = elem;
              return (
                <Radio key={index} value={value}>
                  {label}
                </Radio>
              );
            })}
        </Radio.Group>
      </Form.Item>
    );
  };
  //   const SelectComponent = () => {};
  //   const slotElem = () => {};
  //   const columnElem = () => {};
  //   const dateElem = () => {};
  //   const uploadElem = () => {};
  const onFinish = (val: any) => {
    props.submit(val, searchFormRef.current);
  };
  return (
    <Fragment>
      <Row>
        <Col span={isAddBtn.leftRow}>
          <Form
            {...formLayout}
            onFinish={onFinish}
            ref={searchFormRef}
            initialValues={initialValues}
            layout="inline"
          >
            {initFormItem()}
            <Form.Item>
              <Button htmlType="submit" type="primary">
                {isEdit ? "修改" : "确定"}
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col span={isAddBtn.rightRow}>
          {/* 通过插槽的方式显示 */}
          {children}
        </Col>
      </Row>
    </Fragment>
  );
};
HYFromSearch.propTypes = {
  editData: PropTypes.object,
  formLayout: PropTypes.object,
  formItem: PropTypes.array, //必传
  submit: PropTypes.func,
  initialValues: PropTypes.object,
  isAddBtn: PropTypes.object, //有插槽这个就必传 不然没位置
};
// 默认
HYFromSearch.defaultProps = {
  editData: {},
  formLayout: {},
  formItem: {},
  initialValues: {},
  isAddBtn: {
    leftRow: 24,
    rightRow: 0, //总共24 不想要显示这个按钮 要么不传要么rightRow为0就行
  },
};

export default memo(HYFromSearch);
